//表格组件
import React from 'react';
import { Table, Input, Space, message, Button } from 'antd';
import './index.css'
// import Buttons from '../Button/index';
import Buttons2 from '../Button22/index';
import ButtonsAdd from '../ButtonAdd/index'
//列
const { Search } = Input;

class Tag extends React.Component {
  state = {
    selectedRows: [], // 选中的内容
    // loading: false,
    selectedRowKeys: [],//所选下标数组
    data: [],
    Num: '',//删除时候的对应num
    Num1: ''//修改时候的对应num
  };
  columns = [//ranking
    //key 是排名 num是序号而且是靠num拿到选中的元素
    {
      title: '序号',
      dataIndex: 'num',
    },
    {
      title: '排名',
      dataIndex: 'key',
    },

    {
      title: '名字',
      dataIndex: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '班级',
      dataIndex: 'classs',
    },
    {
      title: '毕业学校',
      dataIndex: 'graduate',
    },
    {
      title: '专业',
      dataIndex: 'profession',
    },
    {
      title: '学历',
      dataIndex: 'education',
    },
    {
      title: '电话',
      dataIndex: 'phone',
    },
    {
      title: '毕业时间',
      dataIndex: 'graduateTime',
    },
    {
      title: '学分',//学分
      dataIndex: 'integral',
    },
    // {
    //   title: 'Delect',
    //   dataIndex: 'delect',
    // },
    {
      title: 'Revise',
      dataIndex: 'revise',
    }
  ];
  //模拟数据


  info = () => {//信息提示
    message.info('请先选中');
  };
  // ccc = (val) => {//父子组件传值以及删除
  //   this.setState({ Num: val })
  //   let arr = this.state.selectedRowKeys
  //   // console.log(arr, val);
  //   let index = arr.includes(val)
  //   // console.log(index);
  //   if (arr.length > 0) {
  //     if (index == true) {
  //       this.hanldDelete()
  //     } else {
  //       this.info()

  //     }
  //   } else {
  //     this.info()
  //   }


  // };
  ccc2 = (val) => {////父子组件传值以及修改
    // console.log(val);
    this.hanldChange(val)
  };
  ccc3 = (val) => {////父子组件传值以及添加
    // console.log(val);
    this.hanldAdd(val)
  };
  //添加数据
  hanldAdd = (val) => {
    let del = this.state.data
    del.push(val)
    let aa = JSON.parse(JSON.stringify(del));
    let arr=[]
    aa.forEach((item, index) => {
      index = index + 1
      item.num = index
      // item.delect = <Buttons ccc={this.ccc}></Buttons>
      item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
      arr.push(item)
    })

    this.setState({ data: arr })
    localStorage.setItem('data2', JSON.stringify(arr));
  }
  //模拟数据
  componentDidMount() {
    // console.log('data2');//data2Arr
    if (JSON.parse(localStorage.getItem('data2Arr'))) {//判断是否存在选中的元素
      let data2Arr = JSON.parse(localStorage.getItem('data2Arr'))
      this.setState({ selectedRowKeys: data2Arr })
      // console.log(data2Arr);
    }
    if (JSON.parse(localStorage.getItem('data2'))) {
      let cc = JSON.parse(localStorage.getItem('data2'))
      let aa = []
      cc.forEach((item, index) => {
        index = index + 1
        item.num = index
        // item.delect = <Buttons ccc={this.ccc}></Buttons>
        item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
        aa.push(item)
      })
      this.setState({ data: aa })
    } else {
      let pp = []
      for (let i = 1; i < 46; i++) {
        pp.push({
          key: i,
          num: i,
          // ranking:i,
          name: '名字',
          age: 32,
          classs: '班级',
          graduate: '毕业学校',
          profession: '专业',
          education: '学历',
          phone: '电话',
          graduateTime: '毕业时间',
          integral: '1',
          // delect: <Buttons ccc={this.ccc}></Buttons>,
          revise: <Buttons2 ccc={this.ccc2}></Buttons2>,
        });
      }
      this.setState({ data: pp })
      localStorage.setItem('data2', JSON.stringify(pp));
    }


  };
  //删除所选的元素
  hanldDelete = () => {//删除所选数据

    // console.log('单删');
    let del = this.state.data
    let arr = this.state.selectedRowKeys
    // console.log(arr);
    let del1 = del.filter((item) => {
      return item.key != this.state.Num
    })
    let arr2 = arr.filter((item) => {
      return item != this.state.Num
    })
    let aa = []
    del1.forEach((item, index) => {
      index = index + 1
      item.num = index
      // item.delect = <Buttons ccc={this.ccc}></Buttons>
      item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
      aa.push(item)
    })

    this.setState({ data: aa, selectedRowKeys: arr2 })
    localStorage.setItem('data2', JSON.stringify(aa));
    localStorage.setItem('data2Arr', JSON.stringify(arr2));
  }
  //删除所有选中元素
  hanldDeletes = () => {//删除所选数据 
    // console.log('多删');
    let del = this.state.data
    let arr = this.state.selectedRowKeys
    // console.log(arr);
    let arr2 = []
    let del1 = del.filter(item => {
      if (!arr.includes(item.key)) {
        // console.log('成功');
        return item
      }
    })
    let aa = []
    del1.forEach((item, index) => {
      index = index + 1
      item.num = index
      // item.delect = <Buttons ccc={this.ccc}></Buttons>
      item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
      aa.push(item)
    })
    // console.log(aa);
    this.setState({ data: aa, selectedRowKeys: arr2 })
    localStorage.setItem('data2', JSON.stringify(aa));
    localStorage.setItem('data2Arr', JSON.stringify(arr2));
  }
  //修改所选元素
  hanldChange = (val) => {//删除所选数据
    let Num1 = val.nums
    let { key, num, name, age, classs, graduate, profession, education, phone, graduateTime, integral } = val
    let obj = {
      key, num, name, age, classs, graduate, profession, education, phone, graduateTime, integral,
      //  delect: <Buttons ccc={this.ccc}></Buttons>,
      revise: <Buttons2 ccc={this.ccc2}></Buttons2>
    }
    // console.log(obj);
    let arr = this.state.data
    let arr2 = []
    arr.forEach(item => {
      if (Number(item.num) == Number(Num1)) {
        arr2.push(obj)
      } else {
        arr2.push(item)
      }
    })
    this.setState({ data: arr2 })
    localStorage.setItem('data2', JSON.stringify(arr2));
  }
  onSelectChange = (selectedRowKeys, selectedRows) => {//获取选中的元素

    // console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
    // let arr=[]
    // selectedRows.forEach(item => arr.push(item.num))
    this.setState({ selectedRows, selectedRowKeys });
    localStorage.setItem('data2Arr', JSON.stringify(selectedRowKeys));
  };

  //搜索框
  onSearch = value => {
    // console.log(value);
    let arr = JSON.parse(localStorage.getItem('data2'))
    let arrnum = []
    let arrname = []
    arr.forEach(item => {
      if (value == item.num) {
        // item.delect = <Buttons ccc={this.ccc}></Buttons>
        item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
        arrnum.push(item)
      }
    })

    arr.forEach(item => {
      if (value == item.name) {
        // item.delect = <Buttons ccc={this.ccc}></Buttons>
        item.revise = <Buttons2 ccc={this.ccc2}></Buttons2>
        arrname.push(item)
      }
    })


    if (arrnum.length > 0) {
      this.setState({ data: arrnum })
    } else if (arrname.length > 0) {
      this.setState({ data: arrname })
    } else {
      this.info()
    }
  }
  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div>
        <div className="tabs22">
          <Space direction="vertical">
            <Search
              placeholder="请输入搜索内容"
              allowClear
              enterButton="搜索"
              size="large"
              onSearch={this.onSearch}
            />
          </Space>
          <Button className="tabs22Button" type="primary" danger onClick={this.hanldDeletes} >
            删除
          </Button>
          <ButtonsAdd ccc={this.ccc3} className="tabs22Button2" />
        </div>
        <Table rowSelection={rowSelection} columns={this.columns} dataSource={this.state.data} />
      </div>
    );
  }
}
export default Tag